<template>
  <div class="h100">
    <div class="common-layout h100">
      <el-container>
        <el-header class="header">
          <div class="header_nav">
            <div class="header_text">票务管理</div>
            <div class="header_right">
              <el-popover
                placement="top-start"
                :width="200"
                trigger="hover"
              >
              <div>
                <p class="title_p">
                  个人中心
                </p>
                <el-divider></el-divider>
                <p class="title_p">
                  退出登录
                </p>
              </div>
                <template #reference>
                  <el-avatar
                    class="avatar"
                    :size="40"
                    src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                  ></el-avatar>
                </template>
              </el-popover>

              <div class="name">admin</div>
            </div>
          </div>
        </el-header>
        <el-container>
          <el-aside class="aside" width="200px">
            <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              :default-active="pathNum"
              text-color="#fff"
            >
              <el-menu-item
                v-for="(item, index) in menuList"
                :key="index"
                :index="index + 1 + ''"
              >
                <!-- <router-link :to="item.path" tag="span">
                  {{ item.title }}
                </router-link> -->

                <span @click="changePage(item.path)">
                  {{ item.title }}
                </span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main class="main">
            <div class="context">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item
                  v-for="(items, indexs) in breadList"
                  :key="indexs"
                >
                  {{ dictionaries[items] }}
                </el-breadcrumb-item>
              </el-breadcrumb>
              <div class="mt20">
                <router-view />
              </div>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref } from "vue";
import diction, { pathInfo } from "@/dictionaries";
const router = useRouter();
const route = useRoute();
const breadList = ref([]);
const dictionaries = ref(diction);
const pathNum = ref("1");

pathNum.value = pathInfo[route.path];

// useRoute === this.$route
// 跳转路由

breadList.value = route.path.slice(1).split("/");

const changePage = (path) => {
  router.push(path);
  setTimeout(() => {
    breadList.value = route.path.slice(1).split("/");
  }, 10);
};

const menuList = [
  {
    title: "首页",
    path: "/home/welcome",
  },
  {
    title: "车次管理",
    path: "/home/adminCar",
  },
  {
    title: "车站管理",
    path: "/home/adminStation",
  },
  {
    title: "线路管理",
    path: "/home/adminLines",
  },
  {
    title: "车票管理",
    path: "/home/adminTickets",
  },
  {
    title: "订单管理",
    path: "/home/adminOrder",
  },
  {
    title: "轨迹监控",
    path: "/home/orbitMonitoring",
  },
  {
    title: "客服聊天",
    path: "/home/talk",
  },
];
</script>
<style scoped>
.avatar {
  margin-top: 10px;
}
.el-container {
  height: 100%;
}

.el-menu {
  border-right: none !important;
}

.aside {
  background: #545c64;
}

.header {
  background: #020202c4;
  color: #fff;
  line-height: 60px;
}

.name {
  display: inline-block;
  position: relative;
  top: -13px;
  left: 15px;
}

.main {
  background: #eee;
}
.context {
  width: 93%;
  margin-left: 2%;
  background: #fff;
  min-height: 600px;
  padding: 15px;
}

.header_nav {
  display: flex;
}

.header_text {
  flex: 1;
  margin-left: 30px;
}



.header_right {
  width: 260px;
}
</style>
